<template>
  <div class="order">
    <!-- 返回按钮 -->
    <VueMovieComeBack title="订单详情" :Home="home" />
    <div v-if="show">
      <van-skeleton title avatar :row="3" />
    </div>
    <div v-else class="item">
      <VueMovieFilmTitleDetail :Detail="Detail.movie" />
      <p>
        总计：<span>{{ price / 3500 }}</span> 张票 实付款<span
          >￥{{ price / 100 }} 元</span
        >
      </p>
      <van-row type="flex" class="delet">
        <van-col span="16">订单编号：123456789</van-col>
        <van-col span="8">
          <van-button type="danger" round @click="refund(id, price)"
            >申请退款</van-button
          ></van-col
        >
      </van-row>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetdetailAPI } from "@/api/api.js";
import VueMovieComeBack from "@/components/common/come_back.vue";
import VueMovieFilmTitleDetail from "@/components/detail/film_title_detail.vue";
export default {
  name: "VueMovieOrderPage",
  components: { VueMovieFilmTitleDetail, VueMovieComeBack },
  data() {
    return {
      id: this.$route.query.id,
      show: true,
      Detail: {},
      home: true,
    };
  },

  mounted() {
     this.$nextTick(function () {
      
      
  
    GetdetailAPI({  movieid: this.id }).then((res) => {
      this.Detail = res.data;
      if (res.status == 200) {
        this.show = !this.show;
      }
      const orderItem = {
        id: this.$route.query.id,
        price: this.price,
        img:res.data.movie.img,
        nm: this.Detail.movie.nm,
        typeDesc: this.Detail.movie.typeDesc,
        cat: this.Detail.movie.cat,
        oriLang: this.Detail.movie.oriLang,
        dir: this.Detail.movie.dir,
        star: this.Detail.movie.star,
        pubDesc: this.Detail.movie.pubDesc,
      };
      this.$store.commit("ADDORDERLIST", orderItem);
    });
     });
  },
  computed: {
    price() {
      return this.$route.query.price;
    },
  },
  methods: {
    refund(id, price) {
      Toast.loading({
        message: "发起退款..",
        forbidClick: true,
      });
      setTimeout(() => {
        this.$store.commit("REFUND", { id, price });
        Toast("退款成功");
        setTimeout(() => {
          this.$router.go("-1");
        }, 1200);
      }, 1500);
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  
  padding: 10px;
  background-color: #342527;
  .item {
  
   border-radius: 10px;
   background-image: linear-gradient(#fff, #342527);
    p {
      text-align: right;
      margin-top: 10px;
      padding: 5px 10px 10px 0;
      font-size: 15px;
      span {
        color: red;
      }
    }
    .delet {
   
      .van-col {
        
        text-align: center;
        .van-button {
          height: 35px;
          margin-bottom: 5px;
        }
      }
      .van-col:nth-child(1) {
        padding-top: 10px;
        font-size: 12px;
        padding-left: 15px;
        text-align: left;
      }
    }
  }
}
</style>